<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>不要做挑战</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            font-family: "Microsoft YaHei", sans-serif;
            transition: background-color 0.3s, color 0.3s;
        }
        body.dark {
            background-color: #000;
            color: #fff;
        }
        body.light {
            background-color: #fff;
            color: #000;
        }

        .container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
            padding: 20px;
            box-sizing: border-box;
        }

        #countdown {
            font-size: 5em;
            font-weight: bold;
        }

        #cardDisplay {
            font-size: 3em;
            text-align: center;
            margin: 20px 0;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 200px;
            max-width: 95vw;
            word-wrap: break-word;
            padding: 10px;
            line-height: 1.4;
        }

        .controls {
            width: 100%;
            max-width: 500px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-bottom: 10px;
        }

        button {
            padding: 10px 20px;
            font-size: 1.2em;
            cursor: pointer;
        }

        .setting-panel {
            width: 100%;
            max-width: 500px;
            margin-top: 10px;
            border: 1px solid #ccc;
            padding: 15px;
            border-radius: 8px;
            background-color: rgba(255,255,255,0.9);
        }
        .dark .setting-panel {
            background-color: rgba(0,0,0,0.8);
            color: #fff;
        }

        label {
            margin-right: 10px;
        }

        #wordListInput {
            width: 100%;
            height: 80px;
            margin-top: 10px;
            font-size: 1em;
        }

        #fileInput {
            margin-top: 10px;
        }

        #remainingCount {
            font-size: 1.5em;
            margin-top: 10px;
        }

        #fontSizeSlider {
            width: 100px;
        }
    </style>
</head>
<body class="light">
    <div class="container">
        <!-- 初始倒计时 -->
        <div id="countdown">3</div>

        <!-- 卡牌显示区 -->
        <div id="cardDisplay" style="display: none;">准备开始</div>

        <!-- 剩余数量 -->
        <div id="remainingCount"></div>

        <!-- 控制按钮 -->
        <div class="controls" id="controls" style="display: none;">
            <button onclick="changeCard()">更换卡</button>
            <button onclick="nextCard()">下一张</button>
            <button onclick="toggleSettings()">设置</button>
        </div>

        <!-- 设置面板 -->
        <div class="setting-panel" id="settingPanel" style="display: none;">
            <h3>设置</h3>
            <p>
                <label>
                    <input type="radio" name="bg" value="light" checked onchange="changeBg(this.value)"> 白底
                </label>
                <label>
                    <input type="radio" name="bg" value="dark" onchange="changeBg(this.value)"> 黑底
                </label>
            </p>
            <p>
                <label>字体大小: </label>
                <input type="range" min="0" max="100" value="30" id="fontSizeSlider" oninput="changeFontSize()">
                <span id="fontSizeValue">30</span>px
            </p>
            <p>
                <label for="wordListInput">导入词库（每行一张卡）：</label>
                <textarea id="wordListInput" placeholder="输入卡牌内容，每行一个"></textarea>
                <button onclick="importFromText()">导入文本</button>
            </p>
            <p>
                <label>或上传文本文件：</label>
                <input type="file" id="fileInput" accept=".txt">
                <button onclick="importFromFile()">上传文件</button>
            </p>
            <button onclick="toggleSettings()">关闭设置</button>
        </div>
    </div>

    <script>
        // 全局变量
        let cards = ["不要做挑战1", "不要做挑战2", "不要做挑战3", "不要做挑战4", "不要做挑战5"];
        let totalCards = cards.length;
        let remaining = totalCards;
        let currentIndex = 0;
        let maxFontSize = 100;

        // 页面加载完成后初始化
        window.onload = function () {
            updateMaxFontSize();
            setFontSize(getMappedSize());
            startGame();
        };

        // 启动游戏：初始倒计时（3秒）
        function startGame() {
            const countdownEl = document.getElementById('countdown');
            let count = 3;

            const timer = setInterval(() => {
                count--;
                if (count > 0) {
                    countdownEl.textContent = count;
                } else {
                    clearInterval(timer);
                    countdownEl.style.display = 'none';
                    document.getElementById('cardDisplay').style.display = 'flex';
                    document.getElementById('controls').style.display = 'flex';
                    updateRemainingCount();
                    showCurrentCard();
                }
            }, 1000);
        }

        // 动态计算最大字体（基于短边）
        function updateMaxFontSize() {
            const shortEdge = Math.min(window.innerWidth, window.innerHeight);
            maxFontSize = shortEdge * 0.7;

            const slider = document.getElementById('fontSizeSlider');
            const fontSizeValue = document.getElementById('fontSizeValue');

            if (slider) slider.max = 100;
            if (fontSizeValue) fontSizeValue.textContent = Math.round(getMappedSize());
        }

        // 映射滑块值到字体大小
        function getMappedSize() {
            const slider = document.getElementById('fontSizeSlider');
            if (!slider) return 30;
            const value = slider.value;
            return 1 + (value / 100) * (maxFontSize - 1);
        }

        // 设置字体大小
        function setFontSize(px) {
            const display = document.getElementById('cardDisplay');
            if (display) display.style.fontSize = px + 'px';
        }

        // 滑块更新字体
        function changeFontSize() {
            const size = getMappedSize();
            setFontSize(size);
            const fontSizeValue = document.getElementById('fontSizeValue');
            if (fontSizeValue) fontSizeValue.textContent = Math.round(size);
        }

        // 通用：带倒计时显示新卡（1秒）
        function showCardWithCountdown(newCardContent, duration = 1000) {
            const display = document.getElementById('cardDisplay');
            if (!display) return;

            let count = Math.floor(duration / 1000);

            const countdownInterval = setInterval(() => {
                if (count > 0) {
                    display.textContent = count + "...";
                } else {
                    clearInterval(countdownInterval);
                    display.textContent = newCardContent;
                }
                count--;
            }, 1000);
        }

        // “更换卡”：随机换一张（带1秒倒计时）
        function changeCard() {
            if (remaining <= 0) return;
            const randomIndex = Math.floor(Math.random() * totalCards);
            const newCard = cards[randomIndex];
            showCardWithCountdown(newCard, 1000);
        }

        // “下一张”：顺序前进（带1秒倒计时）
        function nextCard() {
            if (remaining <= 0) return;
            currentIndex = (currentIndex + 1) % totalCards;
            remaining--;
            updateRemainingCount();
            const newCard = cards[currentIndex];
            showCardWithCountdown(newCard, 3000);
        }

        // 显示当前卡牌（首次进入）
        function showCurrentCard() {
            const display = document.getElementById('cardDisplay');
            if (remaining > 0 && display) {
                display.textContent = cards[currentIndex];
            } else if (display) {
                display.textContent = "游戏结束";
                document.querySelector('.controls').style.display = 'none';
            }
        }

        // 更新剩余数量
        function updateRemainingCount() {
            const el = document.getElementById('remainingCount');
            if (el) el.textContent = `剩余卡牌：${remaining} 张`;
        }

        // 切换设置面板
        function toggleSettings() {
            const panel = document.getElementById('settingPanel');
            panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
        }

        // 更改背景
        function changeBg(mode) {
            document.body.className = mode;
        }

        // 导入文本词库
        function importFromText() {
            const text = document.getElementById('wordListInput').value.trim();
            if (text) {
                cards = text.split('\n').map(line => line.trim()).filter(line => line);
                totalCards = cards.length;
                remaining = totalCards;
                currentIndex = 0;
                updateRemainingCount();
                showCurrentCard();
                updateMaxFontSize();
                alert(`已导入 ${totalCards} 张卡牌`);
            }
        }

        // 导入文件词库
        function importFromFile() {
            const fileInput = document.getElementById('fileInput');
            const file = fileInput.files[0];
            if (!file) {
                alert("请选择一个文件");
                return;
            }

            const reader = new FileReader();
            reader.onload = function(e) {
                const text = e.target.result;
                cards = text.split('\n').map(line => line.trim()).filter(line => line);
                totalCards = cards.length;
                remaining = totalCards;
                currentIndex = 0;
                updateRemainingCount();
                showCurrentCard();
                updateMaxFontSize();
                alert(`已导入 ${totalCards} 张卡牌`);
            };
            reader.readAsText(file);
        }

        // 屏幕旋转时重新计算
        window.addEventListener('resize', () => {
            updateMaxFontSize();
            changeFontSize();
        });
    </script>
</body>
</html>